<template>
  <page-body>
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center WolfTalk_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub WolfTalk_fd0_0'>
          <view class='flex flex-wrap align-center WolfTalk_fd0_0_c0'>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <view>
              <benben-flex-tabs class-name='WolfTalk_benbenTabsfd0_0_c1_c0' v-model="cateId"
                ref="benben_tabsfd0_0_c1_c0" select-mark="benben_tabsfd0_0_c1_c0" key="benben_tabsfd0_0_c1_c0"
                :open-title-type='false' :open-sticky='true' :top='0' :is-show-content='false' :scrollspy='false'
                :tabs-info.sync="tabsInfofd0_0_c1_c0">

                <scroll-view @scroll="tabsInfofd0_0_c1_c0.scrollX = $event.detail.scrollLeft"
                  id="benben_tabsfd0_0_c1_c0" class="benben-tabs" style="width:750rpx" :scroll-x="true"
                  :scroll-left.sync="tabsInfofd0_0_c1_c0.moveX" scroll-with-animation="all .3s ease">
                  <view class="benben-tabs-content" id="benben_tabsfd0_0_c1_c0-content">
                    <view id="benben_tabsfd0_0_c1_c0-title"
                      class="benben-tabs-title flex flex align-center justify-around">
                      <view :class="{ 'checkTitlefd0_0_c1_c0': cateId == '2', 'flex flex-wrap align-center': true }"
                        @tap="cateId = '2'" :id="`benben_tabsfd0_0_c1_c0-title-item-${'2'}`">

                        <text>聊天</text>

                      </view>
                      <view :class="{ 'checkTitlefd0_0_c1_c0': cateId == '1', 'flex flex-wrap align-center': true }"
                        @tap="cateId = '1'" :id="`benben_tabsfd0_0_c1_c0-title-item-${'1'}`">

                        <text>通讯录</text>

                      </view>

                    </view>
                    <view :style="{ left: tabsInfofd0_0_c1_c0.lineleft, maxWidth: tabsInfofd0_0_c1_c0.lineWidth ,}"
                      id="benben_tabsfd0_0_c1_c0-line"
                      class="benben-tabs-line flex benben-flex-tabs-line WolfTalk_linefd0_0_c1_c0"></view>
                  </view>
                </scroll-view>

              </benben-flex-tabs>

            </view>
          </view>
          <view class='flex flex-wrap align-center justify-end WolfTalk_fd0_0_c2'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->

      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout" v-if=" cateId=='1'">
        <view class='flex flex-wrap align-center WolfTalk_fd1_0'>
          <text class='fu-iconfont2  WolfTalk_fd1_0_c0'>&#xe77e;</text>
          <benben-input class='WolfTalk_fd1_0_c1' type="text" :placeholder="`请输入`" v-model="keywords"
            confirm-type="done" :maxlength="-1" :adjust-position='true' placeholder-style="color:#999;font-size:28rpx"
            @confirm="searchCom" />
        </view>
        <view class='flex flex-wrap align-center WolfTalk_fd1_1' v-for="(item,index) in dataMessage" :key="index"
          @click.stop='gochats(item)'>
          <image class='WolfTalk_fd1_1_c0' mode="aspectFill" :src='item.avatar'></image>
          <text class='WolfTalk_fd1_1_c1'>{{item.nickname}}</text>
        </view>
        <fu-empty-ui v-if="dataMessage.length==0"></fu-empty-ui>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout" v-if=" cateId=='2'">
        <view class='flex flex-wrap align-center justify-around flex-sub WolfTalk_fd2_0'>
          <view class='flex flex-direction flex-wrap align-center justify-center' @tap.stop="handleJumpDiy"
            data-type="navigateTo" :data-url="`/pages/grzx/zan/zan`">
            <view class='flex flex-wrap align-center WolfTalk_fd2_0_c0_c0'>
              <image class='WolfTalk_fd2_0_c0_c0_c0' mode="aspectFill" :src='STATIC_URL+"147.png"'></image>
              <benben-message-num :message-num="likeCount" class='WolfTalk_fd2_0_c0_c0_c1' size='24' color='#fff'
                background-color='red'>
              </benben-message-num>
            </view>
            <text class='WolfTalk_fd2_0_c0_c1'>赞</text>
          </view>
          <view class='flex flex-direction flex-wrap align-center justify-center' @tap.stop="handleJumpDiy"
            data-type="navigateTo" :data-url="`/pages/grzx/fans/fans?type=2`">
            <view class='flex flex-wrap align-center WolfTalk_fd2_0_c0_c0'>
              <image class='WolfTalk_fd2_0_c0_c0_c0' mode="aspectFill" :src='STATIC_URL+"191.png"'></image>
              <benben-message-num :message-num="fanCount" class='WolfTalk_fd2_0_c0_c0_c1' size='24' color='#fff'
                background-color='red'>
              </benben-message-num>
            </view>
            <text class='WolfTalk_fd2_0_c0_c1'>新增粉丝</text>
          </view>
          <view class='flex flex-direction flex-wrap align-center justify-center' @tap.stop="handleJumpDiy"
            data-type="navigateTo" :data-url="`/pages/grzx/pinglun/pinglun`">
            <view class='flex flex-wrap align-center WolfTalk_fd2_0_c0_c0'>
              <image class='WolfTalk_fd2_0_c0_c0_c0' mode="aspectFill" :src='STATIC_URL+"148.png"'></image>
              <benben-message-num :message-num="commentCount" class='WolfTalk_fd2_0_c0_c0_c1' size='24' color='#fff'
                background-color='red'>
              </benben-message-num>
            </view>
            <text class='WolfTalk_fd2_0_c0_c1'>评论</text>
          </view>
        </view>
        <view class='flex flex-wrap align-center WolfTalk_fd2_1'>
          <view class='flex flex-wrap position-relative align-center flex-sub WolfTalk_fd2_1_c0'
            @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/grzx/platformAnnouncement/platformAnnouncement`">
            <image class='WolfTalk_fd2_1_c0_c0' mode="aspectFill" :src='STATIC_URL+"150.png"'></image>
            <view class='flex flex-direction flex-wrap align-stretch WolfTalk_fd2_1_c0_c1'>
              <text class='WolfTalk_fd2_1_c0_c1_c0'>平台公告</text>
              <text class='WolfTalk_fd2_1_c0_c1_c1' v-if="article.new_msg.length">{{article.new_msg[0].title}}</text>
            </view>
            <benben-message-num class='messagesPage_fd1_0_c0_c1' size='20' color='#fff' background-color='red'
              :message-num="articleNum">
            </benben-message-num>
          </view>
        </view>
        <view class=' WolfTalk_fd2_1'>

          <view class='flex flex-wrap position-relative align-center flex-sub WolfTalk_fd2_1_c0'
            v-for='(item,key0) in listinfo' :key="key0" @tap.stop="gochat(item)" @longpress="changeMethod(item)"
            data-type="navigateTo" :data-url="`/pages/grzx/platformAnnouncement/platformAnnouncement`">
            <image class='WolfTalk_fd2_1_c0_c0' mode="aspectFill" :src='item.userProfile.avatar'></image>
            <benben-message-num class='messagesPage_fd1_0_c0_c1' size='20' color='#fff' background-color='red'
              :message-num="item.unreadCount">
            </benben-message-num>
            <view class='flex flex-direction flex-wrap align-stretch WolfTalk_fd2_1_c0_c1'>
              <view class='flex align-center justify-between WolfTalk_fd2_1_c0_c1_c0' style="width:550rpx;">
                <view> {{item.userProfile.nick}}</view>
                <view class="WolfTalk_fd2_1_c0_c1_c1"> {{$util.timeFrom(item.lastMessage.lastTime,'yyyy-mm-dd') }}
                </view>
              </view>
              <text class='WolfTalk_fd2_1_c0_c1_c1'>{{item.lastMessage.messageForShow}}</text>
            </view>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->


    </view>
  </page-body>
</template>
<script>
  import {
    TUILogin
  } from "@tencentcloud/tui-core";
  import {
    SYSTEM_CONFIG,
    SDKAppID,
    secretKey
  } from "@/common/config.js";
  import {
    TUIChatKit,
    genTestUserSig
  } from "@/TUIKit";
  import {
    vueVersion
  } from "@/TUIKit/adapter-vue";
  import TencentCloudChat from '@tencentcloud/chat';
  import {
    TUIConversationService
  } from '@tencentcloud/chat-uikit-engine';
  // import pagingList from '@/common/mixin/paging_list.js';
  export default {
    components: {},
    // mixins: [pagingList],

    data() {
      return {
        "tabsInfofd0_0_c1_c0": {
          lineleft: '',
          lineWidth: '',
          moveX: 0,
          scrollX: 0,
          PageScrollX: 0
        },
        "cateId": "2",
        listinfo: [],
        listData: [],
        // "minixPagingListsApi": "",
        // "pageingListApiMethod": "",
        // "allowOnloadGetList": false,
        "dataMessage": [],
        article: '',
        keywords: '',
        likeCount: 0,
        fanCount: 0,
        commentCount: 0,
        articleNum: 0
      };
    },
    computed: {
      userInfo: {
        get() {
          return this.$store.state.userInfo
        },
        set() {
          this.$store.commit('updateUserInfo', value)
        },
      },
      isLogin() {
        return this.$store.state.token == '' ? false : true;
      }
    },
    watch: {},
    onLoad(options) {

    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      let that = this
      this.getRecord()
      this.get6424235abdc3c()
      if (this.isLogin) {

        const userID = this.userInfo ? this.userInfo.id.toString() : '';
        let config = {
          userID: userID, //User ID
          SDKAppID: SDKAppID, // Your SDKAppID
          secretKey: secretKey, // Your secretKey
        }
        const userSig = genTestUserSig(config).userSig;
        TUILogin.login({
          SDKAppID: config.SDKAppID,
          userID: config.userID,
          userSig: userSig,
          // 如果您需要发送图片、语音、视频、文件等富媒体消息，请设置为 true
          useUploadPlugin: true,
          useProfanityFilterPlugin: false,
          framework: `vue${vueVersion}` // 当前开发使用框架 vue2 / vue3
        }).then(() => {
          if (TUILogin.chat.isReady()) {
            let nums = TUILogin.chat.getTotalUnreadMessageCount();
            that.getData(nums)
          }
        })

        that.list()


      }
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      changeMethod(item) {
        let that = this
        // that.$message.info('删除成功')
        // that.getConversationList()
        // return;
        uni.showModal({
          title: '提示',
          content: '删除会话后，将无法回复',
          success: function(res) {
            if (res.confirm) {
              let promise = TUILogin.chat.deleteConversation(item.conversationID);
              promise.then(function(imResponse) {
                // 删除会话成功
                // const { conversationID } = imResponse.data; // 被删除的会话 ID
                // uni.$TIM.on(uni.$TUIKitEvent.CONVERSATION_LIST_UPDATED, that.onConversationListUpdated);
                that.$message.info('删除成功')
                that.list()
              }).catch(function(imError) {
                // console.warn('deleteConversation error:', imError); // 删除会话失败的相关信息
              });

            } else if (res.cancel) {}
          }
        });

        return;
        console.log('111111111111111', data)

      },
      getData(nums) {
        this.$api.post(global.apiUrls.post64241ca6cf066).then(res => {
          if (res.data.code == 1) {
            this.likeCount = res.data.data.likeCount
            this.commentCount = res.data.data.commentCount
            this.fanCount = res.data.data.fanCount
            this.articleNum = res.data.data.article
            let allNum = res.data.data.all
            let all = parseFloat(nums) + parseFloat(allNum)
            if (all) {
              uni.setTabBarBadge({
                index: 2,
                text: all.toString()
              })
            } else {
              uni.removeTabBarBadge({
                index: 2
              })
            }

          }
        })
      },
      get6424235abdc3c() {
        this.$api.post(global.apiUrls.post6424235abdc3c).then(res => {
          if (res.data.code == 1) {
            this.article = res.data.data.article
          }
        })
      },
      searchCom() {
        this.getRecord()
      },
      getRecord() {
        this.$api.post(global.apiUrls.post6662793fd1726, {
          keywords: this.keywords
        }).then(res => {
          if (res.data.code == 1) {
            this.dataMessage = res.data.data
          }
        })
        return;
        this.minixPagingListsApi = global.apiUrls.post6458a3d122c06;
        this.pageingListApiMethod = 'get';
        this.allowOnloadGetList = false;
        this.pagingListPostDataContent = {

        }
        this.listData = [];
        this.dataMessage = this.listData;
        this.pagingListToggle();

      },
      pagingListPostData() {
        return this.pagingListPostDataContent
      },
      // 聊天
      gochats(item) {
        uni.navigateTo({
          url: `/pages/grzx/userHome/userHome?aid=${item.fans_id}`
        })
        return;
        // console.log('iii', item)
        TUIConversationService.switchConversation(`C2C${item.fans_id}`)
        uni.navigateTo({
          url: "/TUIKit/components/TUIChat/index"
        })
      },
      gochat(item) {
        console.log('iii', item)
        TUIConversationService.switchConversation(`C2C${item.userProfile.userID}`)
        uni.navigateTo({
          url: "/TUIKit/components/TUIChat/index"
        })
      },
      list() {
        let that = this
        if (uni.$TIM.isReady()) {
          clearInterval(this.timer)
          let promise = uni.$TIM.getConversationList();
          promise.then(function(imResponse) {
            console.log(imResponse.data.conversationList, 27);
            that.listinfo = imResponse.data.conversationList

            let userIDList = []
            that.listinfo.map((item, index) => {
              userIDList.push(item.userProfile.userID)
              let promise = uni.$TIM.getUserProfile({
                userIDList // 请注意：即使只拉取一个用户的资料，也需要用数组类型，例如：userIDList: ['user1']
              });
              promise.then(function(imResponse) {

                that.listinfo[index].userProfile.birthday = imResponse.data[index]
                  .birthday
                that.listinfo[index].userProfile.gender = imResponse.data[index]
                  .gender

                console.log(imResponse.data, 191, that
                  .listinfo); // 存储用户资料的数组 - [Profile]
              }).catch(function(imError) {
                console.warn('getUserProfile error:', imError); // 获取其他用户资料失败的相关信息
              });
            })
            console.log('listinlistinfolistinfolistinfofo', that.listinfo)
            // const conversationList = imResponse.data.conversationList; // 全量的会话列表，用该列表覆盖原有的会话列表
            // const isSyncCompleted = imResponse.data.isSyncCompleted; // 从云端同步会话列表是否完成
          }).catch(function(imError) {
            console.warn('getConversationList error:', imError); // 获取会话列表失败的相关信息
          });
        }

      },
    }
  };
</script>
<style lang="scss" scoped>
  .messagesPage_fd1_0_c0_c1 {
    position: absolute;
    right: 32rpx;
    bottom: 32rpx;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: #F8F8F8;
    background-size: 100% auto;
  }

  .WolfTalk_flex_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .WolfTalk_fd0_0_c2 {
    width: 120rpx;
  }

  .WolfTalk_linefd0_0_c1_c0 {
    background: #FFFFFF;
    width: 100rpx;
    height: 8rpx;
    top: 80rpx;
    background-size: 100% auto !important;
  }

  .checkTitlefd0_0_c1_c0 {
    font-weight: 700 !important;
    font-size: 32rpx !important;
    color: #333 !important;
    background-color: rgba(255, 255, 255, 1) !important;
  }

  ::v-deep .WolfTalk_benbenTabsfd0_0_c1_c0 {
    background: #fff;
    width: 400rpx;
    height: 90rpx;
    white-space: nowrap;
    text-align: center;
    color: rgba(170, 170, 170, 1);
    font-size: 32rpx;
  }

  .WolfTalk_fd0_0_c0 {
    width: 100rpx;
  }

  .WolfTalk_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .WolfTalk_fd1_1_c1 {
    width: 550rpx;
    margin: 0rpx 0rpx 0rpx 24rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .WolfTalk_fd1_1_c0 {
    width: 100rpx;
    height: 100rpx;
    border-radius: 16rpx;
  }

  .WolfTalk_fd1_1 {
    border-bottom: 1px solid #eee;
    background: #FFFFFF;
    width: 100%;
    padding: 24rpx;
    background-size: 100% auto;
  }

  .WolfTalk_fd1_0_c1 {
    height: 64rpx;
    line-height: 64rpx;
  }

  .WolfTalk_fd1_0_c0 {
    color: rgba(153, 153, 153, 1);
    font-size: 24rpx;
    margin: 0rpx 12rpx 0rpx 0rpx;
  }

  .WolfTalk_fd1_0 {
    background: #FFFFFF;
    background-size: 100% auto;
    margin: 24rpx auto 24rpx auto;
    border-radius: 44rpx;
    padding: 0rpx 16rpx 0rpx 16rpx;
    width: 686rpx;
    height: 64rpx;
  }

  .WolfTalk_fd2_1_c0_c1_c1 {
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 24rpx;
    color: var(--benbenFontColor2);
    margin: 012rpx 0rpx 0rpx 0rpx;
  }

  .WolfTalk_fd2_1_c0_c1_c0 {
    font-size: 32rpx;
  }

  .WolfTalk_fd2_1_c0_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .WolfTalk_fd2_1_c0_c0 {
    width: 96rpx;
    height: 96rpx;
    border-radius: 16rpx;
  }

  .WolfTalk_fd2_1_c0 {
    background: #FFFFFF;
    background-size: 100% auto;
    padding: 24rpx;
  }

  .WolfTalk_fd2_1 {
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .WolfTalk_fd2_0_c0_c1 {
    margin: 12rpx 0rpx 0rpx 0rpx;
  }

  .WolfTalk_fd2_0_c0_c0_c1 {
    position: absolute;
    top: 0rpx;
    right: 0rpx;
  }

  .WolfTalk_fd2_0_c0_c0_c0 {
    width: 96rpx;
    height: 96rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .WolfTalk_fd2_0_c0_c0 {
    position: relative;
  }

  .WolfTalk_fd2_0 {
    background: #FFFFFF;
    background-size: 100% auto;
    padding: 30rpx 0rpx 24rpx 0rpx;
  }
</style>
